<template>
	<view class="AddressBox">
		<cu-custom fhColor="#000" textColor="#000" :isBack="true">
			<block slot="content">地址列表</block>
		</cu-custom>

		<view class="Address">
			<img class="NotAddress" :src="imgUrl + gameDetailsData.My.NotAddress" v-if="addressList.length == 0" />
			<view class="text" v-if="addressList.length == 0">还未添加收货地址</view>
			<view class="AddressList">
				<view class="AddressListItem" v-for="(item, index) in addressList" :key="index">
					<view class="l">
						<view class="address">
							{{ item.receiverDetail }}
						</view>
						<view class="default" v-if="item.defaultStatus && isEditState">默认</view>
						<view class="NameAndTel">
							<view class="Name">{{ item.receiverName }}</view>
							<view class="Tel">{{ item.receiverTel }}</view>
						</view>
					</view>
					<view class="r" v-if="isEditState">
						<view class="btn" @click='addressDelData(item)'>删除</view>
						<view class="btn" @click='editressDelData(item)'>编辑</view>
					</view>
				</view>
			</view>
			<view class="BtnArea">
				<view class="managementBtn" v-if="addressList.length >0" @click="isEditBtn">管理</view>
				<view class="AppendAddressBtn" @click="showModel">添加收货地址</view>
			</view>
		</view>
		<view class="cu-modal modal stateTypeTck" :class="modalName == 'bottomModala' ? 'show' : ''" @click="hideModel">
			<view class="cu-dialog" @click.stop="">
				<view class="AppendAddressBox">
					<view class="Title">添加收货地址</view>
					<view class="ContactPerson">
						<view class="ContactPersonTitle AddressTitle">联系人</view>
						<input type="text" class="ContactPersonInput AddressInput" placeholder="请输入联系人"
							v-model="form.receiverName" />
					</view>
					<view class="ContactNumber">
						<view class="ContactNumberTitle AddressTitle">联系电话</view>
						<input type="text" class="ContactNumberInput AddressInput" placeholder="请输入联系电话"
							v-model="form.receiverTel" maxlength="11" />
					</view>
					<view class="AddressArea">
						<view class="AddressAreaTitle AddressTitle">收货地址</view>
						<input type="text" class="AddressAreaInput AddressInput" placeholder="请输入收货地址"
							v-model="form.receiverDetail" />
					</view>
					<view class="IsDefault">
						<view class="">是否为默认</view>
						<switch @change="switchChange" :checked="true" class="Default" />
					</view>
					<view class="ConfimArea">
						<view class="cancel" @click="hideModel">取消</view>
						<view class="confim" @click="AppendAddress">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import gameDetails from "@/static/lib/public";
	export default {
		data() {
			return {
				imgUrl: this.$http.imgUrl,

				gameDetailsData: gameDetails,

				addressList: [],

				modalName: null,
				form: {
					id: "",
					receiverDetail: "",
					receiverName: "",
					receiverTel: "",
					defaultStatus: true,
				},

				// 是否管理
				isEditState: false
			};
		},
		created() {
			this.getAddressList();
		},
		methods: {
			// 切换管理
			isEditBtn() {
				this.isEditState = !this.isEditState
			},

			// 删除
			addressDelData(item) {
				uni.showModal({
					title: '删除该地址？',
					success: async (res) => {
						if (res.confirm) {
							const url = this.api.my.addressDel
							const res = await this.$http.get(url, {
								id: item.id
							})
							if (res.data.code != 200) {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								});
								return
							}
							this.getAddressList();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			// 修改地址
			editressDelData(item) {
				this.modalName = 'bottomModala'
				this.form.id = item.id
				this.form.receiverDetail = item.receiverDetail
				this.form.receiverName = item.receiverName
				this.form.receiverTel = item.receiverTel
				this.form.defaultStatus = item.defaultStatus
			},

			async getAddressList() {
				const url = this.api.my.AddressList;
				const res = await this.$http.get(url, {});
				this.addressList = res.data.data;
				console.log(this.addressList);
			},
			async AppendAddress() {
				let url = ''
				if (!this.isEditState) {
					url = this.api.my.AddAddress

				} else {
					url = this.api.my.addressEdit
				}
				const res = await this.$http.post(url, this.form);
				if (res.data.code == 200) {
					uni.showToast({
						title: this.isEditState ? "修改成功" : "添加成功",
						duration: 1000,
						icon: "success",
					});
					this.hideModel();
					this.getAddressList();
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
				}

				console.log("添加地址", res);
			},
			showModel() {
				this.modalName = "bottomModala";
				this.form.id = ''
				this.form.receiverDetail = ''
				this.form.receiverName = ''
				this.form.receiverTel = ''
				this.form.defaultStatus = true
			},
			hideModel() {
				this.modalName = null;
				this.form.receiverDetail = "";
				this.form.receiverName = "";
				this.form.receiverTel = "";
				this.form.defaultStatus = false;
			},
			switchChange(e) {
				this.form.defaultStatus = e.detail.value;
				console.log(e, "是否默认");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.AddressBox {
		.Address {
			.NotAddress {
				width: 500rpx;
				margin-left: 130rpx;
				margin-top: 20rpx;
			}

			.text {
				width: 100%;
				text-align: center;
				margin-top: 30rpx;
			}

			.BtnArea {
				width: 100%;
				height: 120rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				margin-top: 20rpx;
				text-align: center;
				line-height: 120rpx;
				color: #FFFFFF;
				display: flex;
				box-shadow: 0rpx -18rpx 36rpx 2rpx rgba(96, 24, 9, 0.1);

				.AppendAddressBtn {
					width: 100%;
					background-color: #376af6;
				}

				.managementBtn {
					width: 100%;
					color: #4c4c59;
				}
			}

			.AddressList {
				.AddressListItem {
					width: 100%;
					background-color: #FFFFFF;
					margin-top: 30rpx;
					padding-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					padding: 20rpx;

					.l {
						flex: 1;

						.default {
							width: 100rpx;
							height: 50rpx;
							text-align: center;
							line-height: 50rpx;
							background-color: #e4e5e6;
							color: #8a8b8b;
							border-radius: 16rpx;
							margin-top: 20rpx;
							margin-bottom: 20rpx;
						}

						.NameAndTel {
							display: flex;
							color: #000;
							opacity: 0.4;
							margin-top: 30rpx;

							.Name {
								margin-right: 30rpx;
							}
						}
					}

					.r {
						display: flex;
						align-items: center;

						.btn {
							margin: 0 20rpx;
						}
					}

				}
			}
		}

		.stateTypeTck {
			z-index: 20;
		}

		.cu-dialog {
			width: 90%;
			height: 650rpx;
			background-color: #FFFFFF;

			.AppendAddressBox {
				width: 100%;
				height: 100%;
				padding-top: 20rpx;

				.ContactPerson {
					width: 100%;
					display: flex;
					height: 120rpx;
					align-items: center;
					padding-left: 20rpx;
					margin-top: 50rpx;
				}

				.ContactNumber {
					width: 100%;
					height: 120rpx;
					align-items: center;
					display: flex;
					padding-left: 20rpx;
				}

				.AddressArea {
					width: 100%;
					height: 120rpx;
					align-items: center;
					border: 1rpx solid #ccc;
					display: flex;
					padding-left: 20rpx;
				}

				.ContactPerson,
				.ContactNumber {
					border: 1rpx solid #ccc;
				}

				.AddressInput {
					margin-left: 40rpx;
					height: 100rpx;
				}

				.IsDefault {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					padding: 0rpx 20rpx;
				}

				.ConfimArea {
					width: 100%;
					height: 112rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.cancel,
					.confim {
						width: 50%;
						text-align: center;
						height: 112rpx;
						line-height: 112rpx;
						opacity: 0.4;
						border: 1rpx solid #000;
					}
				}
			}
		}
	}
</style>